<template>
    <div>
        <div v-if="attentionLabels&&attentionLabels.length>0">
            <el-row :gutter="20">
                <el-col>
                    <el-button style="float: right" size="small" :type="btnType" @click="closable=!closable">快捷操作</el-button>
                </el-col>
                <el-col class="label-tag" :span="2" v-for="label in attentionLabels" :key="label.id">
                    <label-tag :label="label" :closable="closable"></label-tag>
                </el-col>
            </el-row>
        </div>
        <div class="no-attention" v-else>
            您没有关注任何标签
        </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import LabelTag from '@/components/label/LabelTag'

    export default {
        name: 'attentionLabel',
        components: {
            LabelTag
        },
        data () {
            return {
                closable: false
            }
        },
        computed: {
            ...mapGetters('label', [
                'attentionLabels'
            ]),
            btnType () {
                return this.closable ? 'danger' : 'success'
            }
        }
    }
</script>

<style lang="scss" scoped>
    .area-card {
        margin: 20px 0;
    }

    .no-attention {
        height: 320px;
        line-height: 320px;
    }
</style>
